<!DOCTYPE html>
<html>
<head>
    <title>OpenLayers Map--地图基本操作</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
	<script type="text/javascript" src="../js/lib/JQuery/jquery-1.8.2.min.js"></script>
    <script src="../js/lib/OpenLayers-2.11/OpenLayers.js"></script>
	<script type="text/javascript" src="../js/lib/OpenLayers-2.11/lib/OpenLayers/Layer/GoogleTile.js"></script>
   
	<style>
		 /* Toolbar styles */
            #toolbar {
                position: relative;
                padding-bottom: 0.5em; 
               
            }
			#wrapper {
                width: 698px;
            }
	</style>
    <script type="text/javascript">
        var proj = 'EPSG:26915';
        var lodLength = 20;
        var resolutions = [];
        var resolution = 156543.033928;
        for (var i = 0; i < lodLength; i++) {
            resolutions.push(resolution);
            resolution /= 2;
        }
        var tileSize = new OpenLayers.Size(256, 256);
        var agsTileOrigin = new OpenLayers.LonLat(-20037508.342787, 20037508.342787);
        var mapExtent = new OpenLayers.Bounds(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787);

        var map,measureControls;
		 //添加标注
		 var markers,marker;
        function init() {
         format = 'image/png';
            map = new OpenLayers.Map('map', {
               maxExtent: mapExtent,
			   displayProjection: new OpenLayers.Projection("EPSG:4326"),
                controls: [
	            new OpenLayers.Control.Navigation(),
	            new OpenLayers.Control.LayerSwitcher(),//图层切换
	            new OpenLayers.Control.PanZoomBar(),
	            new OpenLayers.Control.MousePosition({element: document.getElementById('location')}),//显示鼠标坐标
				new OpenLayers.Control.Scale($('scale')),
				new OpenLayers.Control.OverviewMap()  //鹰眼
				
				]
            });

            var baseLayer = new OpenLayers.Layer.GoogleTile('google map', 
			"http://mt1.google.cn/vt/lyrs=m@189000000&hl=zh-CN&gl=CN&src=app&x=${x}&s=&y=${y}&z=${z}&s=Ga", {
                tileOrigin: agsTileOrigin,
                resolutions: resolutions,
                sphericalMercator: true,
                maxExtent: mapExtent,
                isBaseLayer: true,
                type: 'png'
                //projection: proj
            });
            
            map.addLayers([baseLayer]);
			var center=new OpenLayers.LonLat(103.222595,35.70737).transform(map.displayProjection,map.getProjectionObject());
			map.setCenter(center, 4);  //添加平移缩放工具条

			
			
        }

 function lonlat2mercator(lonlat){
	var  mercator={x:0,y:0};
	var x = lonlat.x *20037508.34/180;
	var y = Math.log(Math.tan((90+lonlat.y)*Math.PI/360))/(Math.PI/180);
	y = y *20037508.34/180;
	mercator.x = x;
	mercator.y = y;
	return mercator ;
   }
 
    </script>
</head>
<body>
	<div id="toolbar" style="display:">			
			<input type="button" value="放大" onclick="zoomIn()"/>
			<input type="button" value="缩小" onclick="zoomOut()"/>
			<input type="button" value="获取地图大小" onclick="getSize()"/>
			<input type="button" value="平移" onclick="toggleControl('none')"/>
			<input type="button" value="线路测量" onclick="toggleControl('line')"/>
			<input type="button" value="测量面积" onclick="toggleControl('polygon')"/>
			<input type="button" value="shift拉框" onclick="boxExtend()"/>
			<input type="button" value="显示标注" onclick="addMarker()"/>
			<input type="button" value="移除标注" onclick="removeMarker()"/>
			<input type="button" value="画多边形获取经纬度坐标" onclick="drawProly()"/>
        </div>
    <div id="map" style="width: 100%; height: 600px">
    </div>
	<div id="wrapper" style="width:100%;height:25px;">
            <span id="location" style="width:200px;height:25px;">经纬度坐标</span>
            <span id="scale" style="width:100px;height:25px;">
            </span>
			<span id="output" style="width:100px;height:25px;">
			</span>
    </div>
</body>
<script>
	$(document).ready(function(){
		var height=$(window).height()-90;
		$("#map").height(height);
		init();
		
		
		//添加点标注的图层
		  markers = new OpenLayers.Layer.Markers("markers");
          map.addLayer(markers);  
		  markers.setZIndex(200);
		  
		  
		/**********************************点、线、面测量开始**********************************************/
			
			 var sketchSymbolizers = {
                "Point": {
                    pointRadius: 4,	
                    graphicName: "square",
                    fillColor: "white",
                    fillOpacity: 1,
                    strokeWidth: 1,
                    strokeOpacity: 1,
                    strokeColor: "#333333"
                },
                "Line": {
                    strokeWidth: 3,
                    strokeOpacity: 1,
                    strokeColor: "#666666",
                    strokeDashstyle: "dash"
                },
                "Polygon": {
                    strokeWidth: 2,
                    strokeOpacity: 1,
                    strokeColor: "#666666",
                    fillColor: "white",
                    fillOpacity: 0.3
                }
            };
            var style = new OpenLayers.Style();
            style.addRules([
                new OpenLayers.Rule({symbolizer: sketchSymbolizers})
            ]);
		var styleMap = new OpenLayers.StyleMap({"default": style});
		measureControls = {
                line: new OpenLayers.Control.Measure(
                    OpenLayers.Handler.Path, {
                        persist: true,
                        handlerOptions: {
                            layerOptions: {styleMap: styleMap}
                        }
                    }
                ),
                polygon: new OpenLayers.Control.Measure(
                    OpenLayers.Handler.Polygon, {
                        persist: true,
                        handlerOptions: {
                            layerOptions: {styleMap: styleMap}
                        }
                    }
                )
            };
			
			var control;
            for(var key in measureControls) {
                control = measureControls[key];
                control.events.on({
                    "measure": handleMeasurements,
                    "measurepartial": handleMeasurements
                });
                map.addControl(control);
            }
	});
	
		//获取面积的结果赋值
		  function handleMeasurements(event) {
            var geometry = event.geometry;
            var units = event.units;
            var order = event.order;
            var measure = event.measure;
            var element = document.getElementById('output');
            var out = "";
            if(order == 1) {
                out += "距离为: " + measure.toFixed(3) + " " + units;
            } else {
                out += "面积为: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>";
            }
            element.innerHTML = out;
        }
		//缩小
		function zoomOut(){
			map.zoomOut();
		}
		//放大
		function zoomIn(){
			map.zoomIn();
		}
		//获取地图数据
		function getSize(){
			alert(map.getSize()+",高度为="+map.getSize().h);
		}
		//切换鼠标事件功能
		function toggleControl(_value) {
            for(key in measureControls) {
                var control = measureControls[key];
                if(_value == key ) {
                    control.activate();
                } else {
                    control.deactivate();
                }
            }
        }
		/*******************多边形获取经纬度坐标系*************************/
		 function drawProly(){
			var getpolygonxy = new OpenLayers.Control();
			OpenLayers.Util.extend(getpolygonxy, {
				draw: function() {
					this.polygon= new OpenLayers.Handler.Polygon(getpolygonxy ,
							{ "done": this.notice },{ "persist": true},
							{ keyMask: OpenLayers.Handler.MOD_SHIFT });
					this.polygon.activate();
				},
				notice: function(bounds) {
					/*
					var box=bounds.getBounds();
					 var lonlat1=ll.transform(map.getProjectionObject(),this.displayProjection );
					 var lonlat2=ur.transform(map.getProjectionObject(),this.displayProjection );
					alert(lonlat1.lon+", "+lonlat1.lat+"    "+lonlat2.lon+", "+lonlat2.lat);
					*/
					alert(bounds.transform(map.getProjectionObject(),this.displayProjection ).toString());//坐标信息		
					this.polygon.deactivate();			
				}
			});
			map.addControl(getpolygonxy);
		 }
		
		
		//添加
		var markArr=new Array();
		function addMarker(){
			 var url = 'http://www.openlayers.org/dev/img/marker.png';
                var sz = new OpenLayers.Size(20, 20);  //尺寸大小
                var calculateOffset = function(size) {
                    return new OpenLayers.Pixel(-(size.w/2), -size.h);
                 };
                var icon = new OpenLayers.Icon(url, sz, null, calculateOffset);
				
				marker = new OpenLayers.Marker(new OpenLayers.LonLat(113.34851,33.22630), icon);
                markers.addMarker(marker);

               // marker = new OpenLayers.Marker(madrid, icon.clone());
               // markers.addMarker(marker);			
		}
		//移除
		function removeMarker() {
                markers.removeMarker(marker);
         }
		 
		/*********************拉宽并获取经纬度坐标系*********************************/
		function boxExtend(){
			var controlBox = new OpenLayers.Control();
              OpenLayers.Util.extend(controlBox, {
                    draw: function () {
                        this.box = new OpenLayers.Handler.Box( controlBox,
                            {"done": this.notice},{ "persist": true},
                            {keyMask:OpenLayers.Handler.MOD_SHIFT });
                        this.box.activate();
                    },

                    notice: function (bounds) {	
                        var ll = map.getLonLatFromPixel(new OpenLayers.Pixel(bounds.left, bounds.bottom)); 
                        var ur = map.getLonLatFromPixel(new OpenLayers.Pixel(bounds.right, bounds.top)); 
                        	alert(ll.lon.toFixed(4) + ", " + 
                              ll.lat.toFixed(4) + ", " + 
                              ur.lon.toFixed(4) + ", " + 
                              ur.lat.toFixed(4));
							  
							  this.box.deactivate();
							  /*
							  var lonlat1=ll.transform(map.getProjectionObject(),this.displayProjection );
							  var lonlat2=ur.transform(map.getProjectionObject(),this.displayProjection );
							  alert(lonlat1.lon+", "+lonlat1.lat+"    "+lonlat2.lon+", "+lonlat2.lat);
							  */
                    }
                });
			map.addControl(controlBox);
		}
</script>

</html>
